<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2744615_xe4s1meu63r.css" />
		<link rel="stylesheet" href="../content/SearchCss.css">
	</head>
	<body>

		<div id="View_Search_Main">

			<!-- 导航栏 -->
			<div class="NavigationTop">
				<input type="text" id="SearchInput" v-model="SearchText" placeholder="搜索" @input="SearchChange" autocomplete="off" />
			</div>
			
			<div class="SearchDisplay">
				
				<div class="outcome_li" v-for="index in SearchList">
					
					<!-- 文章 -->
					<div v-if="index.isArtOrUser==0" class="outcome_div">
						<div class="Art-top">
							<div>
								<span>{{index.outcome.title}}</span>
								<sub>{{index.outcome.userName}}</sub>
							</div>
							<sup>{{index.outcome.time}}</sup>
						</div>
						<div class="Art-atuo" v-html="SetContext(index.outcome.context+'...')">
							
						</div>
						<div class="article-Interactive">
							<span :class="index.outcome.isLike?'LikeCheck':''" @click="ArticleLike(index.outcome.articleId,$event)"><i class="iconfont icon-dianzan"></i>{{SetNumberToString(index.outcome.likeCount)}}</span>
							<span><i class="iconfont icon-pinglun"></i>{{SetNumberToString(index.outcome.commentCount)}}</span>
						</div>
					</div>
					<!-- 用户 -->
					<div v-if="index.isArtOrUser==1" class="outcome_div PayUser_Li">
						<div class="PayAvatar" :style="'background-image: url(' + index.outcome.avatar"></div>
						<div class="PayInfo">
							<div class="PayName">
								<span>{{index.outcome.nickName}}</span>
							</div>
							<div class="PayBePay">
								<span>关注数 : {{index.outcome.payCount}}</span>
								<span>粉丝数 : {{index.outcome._PayCount}}</span>
							</div>
						</div>
						<div :class=" index.outcome.isPay?'IsPayCheck isMutualBut':'isMutualBut'" @click="CancelPay(index.outcome.userId)">
							{{index.outcome.isPay?"已关注":"关注"}}
						</div>
					</div>
					

				</div>
				
			</div>
			
			<div class="returnUser">
				<a href="UserArticle.html">返回个人页</a>
			</div>

		</div>

		<script src="../javaScript/vue.js"></script>
		<script src="../javaScript/jquery-3.5.1.min.js"></script>
		<script>
			$(function() {
				var View_UserArticel_Main_Vue = new Vue({
					el: "#View_Search_Main",
					data: {
						SearchText: "",
						SearchList: [],
						SearchTimeJudge: 0,
						SearchTime: "",
						SetNumberToString(text) {
							var num = (text + "").toString();
							var len = num.length;
							if (num.length < 4)
								return num;
							if (num.length == 4)
								return num.substring(0, 1) + "." + num.substring(1, 2) + "k";
							if (num.length > 4)
								return num.substring(0, len - 4) + "." + num.substring(len - 4, len - 3) + "w";
						},
						SetContext: function(text) {
							text = text.replaceAll('$T01', '<');
							text = text.replaceAll('$T02', '>');
							return text.replaceAll('T03', '/');
						},
					},
					watch: {
						//搜索限制请求
						SearchTimeJudge(nval, oval) {
				
							var thisVue = this;
							if (nval == 1) {
								//执行搜索
								Search();
							}
						}
					},
					methods: {
						//文章点赞
						ArticleLike(id) {
							var thisVue = this;
							$.get("https://localhost:44356/api/Interactive/ArticleLike", {
								Token: localStorage.getItem("ArticleUserId"),
								ArticleId: id
							}, function(data) {
								console.log(data)
								if (data.statusCode == 0) {
									var arr = thisVue.SearchList;
									for (var index in arr) {
										if(arr[index].isArtOrUser == 0){
											
											if (arr[index].outcome.articleId == id) {
												arr[index].outcome.isLike = data.result;
												if (data.result)
													arr[index].outcome.likeCount++;
												else
													arr[index].outcome.likeCount--;
											}
										}
									}
								}
							})
						},
						//关注用户
						CancelPay(uid){
							var thisVue = this;
							$.get("https://localhost:44356/api/UserDetails/PayCheck", {
								Token: localStorage.getItem("ArticleUserId"),
								CurUid : uid
							}, function(data) {
								console.log(data);
								if(data.statusCode == 0){
									var arr = thisVue.SearchList;
									if(data.result){
										//关注成功
										for (var index in arr) {
											if(arr[index].isArtOrUser == 1){
												if (arr[index].outcome.userId == uid){
													arr[index].outcome.isPay = true;
												}
											}
										}
									}else{
										//取消关注
										for (var index in arr) {
											if(arr[index].isArtOrUser == 1){
												if (arr[index].outcome.userId == uid){
													arr[index].outcome.isPay = false;
												}
											}
										}
									}
								}
							})
						},
						//搜索事件
						SearchChange() {
							var thisVue = this;
							if (this.SearchText == "") {
								this.SearchList = [];
								return;
							}
				
							clearTimeout(this.SearchTime);
							this.SearchTime = setTimeout(function() {
								thisVue.SearchTimeJudge = 1;
							}, 1000)
						}
					}
				});
				
				var thisVue = View_UserArticel_Main_Vue.$data;
				// 获取地址栏的值
				thisVue.SearchText = GetQueryString('context');
				//默认进行一次搜索
				if (thisVue.SearchText != "") {
					//执行搜索
					Search();
				}
				
				function Search(){
					$.get("https://localhost:44356/api/Search/Find", {
						Token: localStorage.getItem("ArticleUserId"),
						LikeText: thisVue.SearchText
					}, function(data) {
						
						var arr = data.result;
						if (data.statusCode == 0) {
							//提取出是用户的数据
							var userArr = [];
							for (var index = 0; index < arr.length; index++) {
								if (arr[index].isArtOrUser == 1) {
									userArr.push(arr[index]);
									arr.shift();
									index--;
								}
							}
							//随机插入数组
							var lenth = userArr.length;
							for (var i = 0; i < lenth; i++) {
								arr.splice(Math.floor(Math.random() * arr.length), 0, userArr[i]);
							}
						}
						console.log(arr);
						thisVue.SearchList = arr;
						thisVue.SearchTimeJudge = 0;
					})
				}

				function GetQueryString(name) {
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
					var r = window.location.search.substr(1).match(reg);
					if (r != null) return unescape(r[2]);
					return null;
				}

			})
		</script>
	</body>
</html>
